<template>
    <div class="parent">
        <h1>父组件 - {{ count }}</h1>
        <!-- 调用子组件 -->
        <ListCom />
        <button @click="changeCount">修改数据</button>
    </div>
</template>

<script setup lang="ts">
import ListCom from '@/components/ListCom.vue';

import { provide ,ref,inject} from 'vue';

//父组件通过provide提供可以被后代组件注入的数据（发布数据-发布者）
//
provide("parentData","顶级组件的数据")

//发布一个响应式数据
const count = ref<number>(0)
provide("count",count)

function changeCount(){
    count.value += 1
}
provide("changeCount",changeCount)

//接受子子组件传递的数据
//provide和inject是一个单向的数据流程，只能从高层组件往底层组件去传递数据
const itemData = inject("itemData")
console.log(itemData);


</script>

<style lang="less" scoped>
.parent{
    width: 100%;
    height: 500px;
    background-color: gray;
    h1{
        color: red;
    }
}
</style>